<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .content {
        width: 300px;
    }
    .append{
        background-color: blue;
    }
    .appendTo{
        background-color: red;
    }
    </style>
</head>

<body>
    <h2>通过append与appendTo添加元素</h2>
    <button id="bt1">点击通过jQuery的append添加元素</button>
    <button id="bt2">点击通过jQuery的appendTo添加元素</button>

    <div class="content"></div>

    <script type="text/javascript">

    	$("#bt1").on('click', function() {
    		//.append(), 选择表达式在函数的前面，
    		//参数是将要插入的内容。
    		$(".content").append('<div class="append">通过append方法添加的元素</div>')
    	})

    </script>

    <script type="text/javascript">

    	$("#bt2").on('click', function() {
    		//.appendTo()刚好相反，内容在方法前面，
    		//无论是一个选择器表达式 或创建作为标记上的标记
    		//它都将被插入到目标容器的末尾。
    		$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
    	})

    </script>

</body>

</html>
